<!DOCTYPE html>
<html>
<head>
    <title>督察问题标准表</title>
    <#include "/header.html">
        <link rel="stylesheet" href="${request.contextPath}/statics/css/homepage.css">
        <!--<link href="://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
        <link rel="stylesheet" href="${request.contextPath}/statics/css/font-awesome.min.css">
        <link rel="stylesheet" href="${request.contextPath}/statics/plugins/jq22/jq22.css">
        
    <link rel="stylesheet" href="${request.contextPath}/statics/css/index/index.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/index.css">
        <!--<link rel="stylesheet" href="${request.contextPath}/statics/plugins/jq22/superfish.css">-->

        </head>
<body>
<style type="text/css">
	#noticType{
		margin:10px 0 5px;
	}
    #noticType span {
        padding: 0px 5px 5px 0px;
        cursor:pointer;
        font:500 16px MicrosoftYaHei;
        color:#999999;
        margin:0 5px 0 0;
    }

    #noticType .choseActive {
            color: #2DA2FF;
    border-bottom: 1px solid #2DA2FF;
    }
    .context :hover{
    	color:#2DA2FF;
    }
</style>
<div id="rrapp">
    <div class="flex-box">
        <div id="cygn" class="content-top content-box">
            <h4 class="clearfix charts-title">
                常用功能
            </h4>
            <div style="min-height:40px;">
            <ul class="top-list function-list clearfix" style="width:90%; float:left;" id="alwaysUse">
            </ul>
            <div class="btnBlue" @click="initMemu();" >编辑</div>
            </div>
            <el-dialog
                    v-cloak
                    title="可选菜单"
                    :visible.sync="memuView"
                    :show-close=false
                    width="500px"
                    top="18%"
            >
                <el-checkbox-group v-model="checkList">
                    <el-checkbox v-for="(item,index) in types" :checked="item.isUse==1" :label="item.menuId">{{item.name}}</el-checkbox>
                </el-checkbox-group>
                <!--<el-form ref="form" label-width="80px">
                    <el-form-item >
                        <el-checkbox-group v-model="types">
                            <el-checkbox :label="item.name" :name="item.menuId" :checked="item.isUse==1" v-for="item in types"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>-->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="memuView = false">取 消</el-button>
                    <el-button type="primary" @click="saveData()" class="btnBlueBg">确 定</el-button>

                </span>
            </el-dialog>
        </div>



        <div class="content-middle flex-horizontal clearfix">
            <div class="middle-left content-box" style="height:430px;">
                <h4 class="charts-title">
                    督察趋势
                    <!--<span class="more-trends more-messages pull-right">
                        更多
                        <i class="fa fa-angle-right" style="margin-left: 5px"></i>
                    </span>-->
                    <span class="select-area pull-right">
                        <select id="date-type-item" class="charts-date-select charts-select">
                            <option value="1">天</option>
                            <option value="2">周</option>
                            <option value="3">月</option>
                            <option value="4">年</option>
                        </select>
                         <!--<div id="trendChartXzqh" class="charts-select"></div>-->
                        <select id="trends-area-select" class="charts-area-select charts-select">
                            <option value="-1">全部</option>
                        </select>
                        <select id="trends-area-select-city" class="charts-area-select charts-select">
                            <option value="-1">全部</option>
                        </select>
                        <select id="trends-area-select-area" class="charts-area-select charts-select">
                            <option value="-1">全部</option>
                        </select>
                    </span>
                </h4>
                <!--<ul class="date-type-list clearfix">
                    <li class="date-type-item pull-left active">
                        <button type="button" class="daily" value="1">天</button>
                    </li>
                    <li class="date-type-item pull-left">
                        <button type="button" class="week" value="2">周</button>
                    </li>
                    <li class="date-type-item pull-left">
                        <button type="button" class="month" value="3">月</button>
                    </li>
                    <li class="date-type-item pull-left">
                        <button type="button" class="year" value="4">年</button>
                    </li>
                </ul>-->
                <div class="trends-charts" id="trends-charts" style="width: 50%\9; height: 380px"></div>
            </div>
            <div class="middle-right content-box" style="height:430px;">
                <h4 class="charts-title" style="width:100%;">
                    <span id="titleByNotic">
                    	通知通报
                    </span>
                    <span class="more-messages">
                        <span id="messageMore">更多信息</span>
                    </span>
                <div id="noticType">
               		<span class="choseActive" id="tztb" onclick="getNoticeList()" >通知通报</span>
               		<span id="zlxx" onclick="getInstructionList()" >指令信息</span>
                </div>
                    <span class="changeType">
                        <span class="type-radio type1" style="display : none;" value="0">通知通报</span>
                        <span class="type-radio type2" style="display : none;" value="1">指令详情</span>
                    </span>
                </h4>
                <ul class="message-list" style="height:350px;" id="noticlist">

                </ul>
            </div>
        </div>
        <div class="content-bottom flex-horizontal clearfix" style="height:430px;">
             <!--督察问题-->
            <div class="bottom-left content-box">
                <h4 class="charts-title">
                    问题分类
                    <span class="select-area pull-right" >
                        <select id="problem-date-select" class="charts-date-select charts-select">
                            <option value="1">本周</option>
                            <option value="2">本月</option>
                            <option value="3">本年</option>
                        </select>
                         <!--<div id="problemChartXzqh" class="charts-select"></div>-->
                        <select id="problem-area-select" class="charts-area-select charts-select">
                            <option value="-1">全部</option>
                        </select>
                        <select id="problem-area-select-city" class="charts-area-select charts-select">
                            <option value="-1">全部</option>
                        </select>
                        <select id="problem-area-select-area" class="charts-area-select charts-select">
                            <option value="-1">全部</option>
                        </select>
                    </span>
                </h4>
                <div class="trends-charts" id="problem-charts" style="width: 30%\9; height: 380px"></div>
            </div>
            <!--督察数据-->
            <div class="bottom-center content-box">
                <h4 class="charts-title">
                    督察数据
                    <span class="select-area pull-right">
                        <select id="supervise-date-select" class="charts-date-select charts-select">
                            <option value="1">本周</option>
                            <option value="2">本月</option>
                            <option value="3">本年</option>
                        </select>
                        <select id="supervise-area-select" class="charts-area-select charts-select">
                            <option value="-1">全部</option>
                        </select>
                        <select id="supervise-area-select-city" class="charts-area-select charts-select">
                            <option value="-1">全部</option>
                        </select>
                        <select id="supervise-area-select-area" class="charts-area-select charts-select">
                            <option value="-1">全部</option>
                        </select>
                    </span>
                </h4>
                <div class="trends-charts" id="supervise-charts" style="width: 30%\9; height: 380px"></div>
            </div>
            <!--整改情况-->
            <div id="homepage" class="bottom-right content-box">
                <h4 class="charts-title">
                    整改情况
                    <span class="select-area pull-right">
                        <select id="rectify-date-select" @change="getPercentageNumByClick()" class="charts-date-select charts-select">
                            <option value="1">本周</option>
                            <option value="2">本月</option>
                            <option selected value="3">本年</option>
                        </select>
                        <!--<div id="rectifyChartXzqh"></div>-->
                        <select id="rectify-area-select" @change="getPercentageNumByClick(1)"  class="charts-area-select charts-select">
                            <option value="-1">全部</option>
                        </select>
                        <select id="rectify-area-select-city" @change="getPercentageNumByClick(2)" class="charts-area-select charts-select">
                            <option value="-1">全部</option>
                        </select>
                        <select id="rectify-area-select-area" @change="getPercentageNumByClick(3)" class="charts-area-select charts-select">
                            <option value="-1">全部</option>
                        </select>

                    </span>
                </h4>
                <div class="charts-box" id="rectify-charts" style="width: 30%\9; height: 300px;text-align:center;padding-top:20px;">
                <div>
                	<div class="zgLeft">
                <el-progress type="circle" stroke-width="5" width="200" :percentage="percentageNum" color="#FFD1A4"></el-progress>
                </div>
                <div class="zgRight">
                		<div class="divRadius">
                			<div class="charts-info-title">问题总数：{{allQuestionCount}}</div>
						<div class="charts-info-title">已整改问题：{{rectifyNum}}</div>
                		</div>
                </div>
                </div>
                <div>
                	<div class="zgLeft" style="border-top:1px solid rgba(230,230,230,1);margin-top:24px;">
                		
                <el-progress :stroke-width="10" :percentage="sczg" color="#75B3FF"></el-progress>
                <el-progress :stroke-width="10" :percentage="eczg" color="#75B3FF"></el-progress>
                	</div>
                	<div class="zgRight" style="border-top:1px solid rgba(230,230,230,1);margin-top:24px;">
						<div class="charts-info-title">今年单次整改</div>
						<div class="charts-info-title">今年多次整改</div>
                	</div>
                </div>
                	<!--<div class="con">
					  <div class="percent-circle percent-circle-left">
					    <div class="left-content"></div>
					  </div>
					  <div class="percent-circle percent-circle-right">
					    <div class="right-content"></div>
					  </div>
					  <div class="text-circle">0%</div>
					</div>-->
            </div>
        </div>
    </div>
</div>

<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
<script src="${request.contextPath}/statics/plugins/element/index.js"></script>
<script src="${request.contextPath}/statics/libs/jquery-3.3.1.min.js"></script>
<script src="${request.contextPath}/statics/libs/echarts.min.js"></script>
<!--<script src="${request.contextPath}/statics/plugins/jq22/jquery-latest.min.js"></script>-->
<!--<script src="${request.contextPath}/statics/plugins/jq22/jq22.js"></script>-->
<!--<script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>-->
<script src="${request.contextPath}/statics/js/modules/business/homepage/homepage.js?_${.now?long}"></script>
<style>
    .middle-left,.middle-right{width:49%\9;display:inline-block\9;float:left\9;}
    .content-bottom{width:100%\9;}
    .bottom-left,.bottom-center,.bottom-right{width:32%\9;display:inline-block\9;float:left\9;}
    .charts-info-left,.charts-info-right{width:50%;float:left;}
</style>
</body>
</html>
<!--
<script>
var leftContent  = document.querySelector(".left-content");
var rightContent  = document.querySelector(".right-content");
var textCircle   = document.querySelector(".text-circle");
  var angle = 140/200*360;
    if(angle > 180){
      leftContent.setAttribute('style', 'transform: rotate(180deg)');
      rightContent.setAttribute('style', 'transform: rotate('+(angle-180)+'deg)');
    }else{
      leftContent.setAttribute('style', 'transform: rotate('+angle+'deg)');
    }
    textCircle.innerHTML = parseInt(angle*100/360) +'%';
</script>-->
